<template>
  <!--首页右侧微型购物车区域-->
  <div id="meg">
    <div class="meg_nav" @click="drawer = true">
      <div class="meg_shoppingbag">
        <img src="../../img/meg_showcar.png" />
        <p>购物车</p>
        <div><span>{{ userInfo.id ? cartgoods.length : 0 }}</span></div>
      </div>
      <a class="meg_top" @click.stop="scrollToTop">
        <img src="../../img/meg_top.png" />
      </a>
    </div>
    <el-drawer title="购物车" :visible.sync="drawer" :direction="direction">
      <div class="meg_show">
        <div class="toolbar_header">
          <a @click.prevent="goToShop">全屏查看</a>
        </div>
        <div class="meg_content" v-if="userInfo.id">
          <DrawerItem v-for="(goods) in cartgoods" :key="goods.goods_id" :goods="goods"
            @computeShopCar="computeShopCar" />
        </div>
        <div class="meg_noLogin" v-else>请先登录~</div>
        <div class="toolbar_footer">
          <div class="pro_total">
            <h3>
              <span>已选</span>
              <strong class="total_count">{{ totalAmount }}</strong>
              <span>件</span>
            </h3>
            <span>
              <strong class="total_price">{{ totalPrice | moneyFormat }}</strong>
            </span>
          </div>
          <div class="pro_cashier">
            <el-button type="danger" :disabled="!totalAmount" @click="handleCheckout">结算</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 引入处理返回顶部的函数
import { animate } from "@/config/utils"
import DrawerItem from './children/DrawerItem'
import { mapState, mapActions } from 'vuex'
import { MessageBox, Message } from 'element-ui'
import { updateStock } from '@/api/index' // Import the new API method

export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      totalPrice: 0,
      totalAmount: 0,
      isSelectedAll: false
    };
  },
  computed: {
    ...mapState(['userInfo', 'cartgoods']),
  },
  mounted() {
    this.computeShopCar();
  },
  methods: {
    scrollToTop() {
      // 做缓动动画返回顶部
      let docB = document.documentElement || document.body;
      animate(docB, { scrollTop: '0' }, 400, 'ease-out');
    },
    goToShop() {
      this.$emit('goShopCar');
    },
    // 是否选中所有商品
    selectedAll(isSelectedAll) {
      this.isSelectedAll = !isSelectedAll;
      this.$store.dispatch('selectedAll', { isSelectedAll });
      this.computeShopCar();
    },
    computeShopCar() {
      this.totalPrice = 0;
      this.totalAmount = 0;
      let flag = true;
      this.cartgoods.forEach(goods => {
        if (goods.checked) {
          this.totalPrice += goods.buy_count * goods.price;
          this.totalAmount++;
        } else {
          flag = false;
        }
      });
      this.isSelectedAll = flag;
    },
    async handleCheckout() {
      try {
        await MessageBox.confirm('您确定购买这些商品吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        let user_id = this.userInfo.id;
        let selectedGoods = this.cartgoods.filter(goods => goods.checked);

        // 生成订单
        let order = {
          user_id: user_id,
          items: selectedGoods,
          totalAmount: this.totalAmount,
          totalPrice: this.totalPrice,
          date: new Date().toLocaleString()
        };
        await this.$store.dispatch('createOrder', order);

        // 更新库存
        for (let goods of selectedGoods) {
          await updateStock(goods.goods_id, goods.buy_count);
        }

        // 删除已购买商品
        selectedGoods.forEach(goods => {
          this.$store.dispatch('delSingleGoods', { goods, user_id });
        });

        this.totalAmount = 0; // 清零已选商品数量
        this.totalPrice = 0; // 清零总价
        this.isSelectedAll = false; // 重置全选框的状态

        Message({
          type: 'success',
          message: '购买成功！'
        });
      } catch (error) {
        Message({
          type: 'info',
          message: '已取消购买'
        });
      }
    }
  },
  components: {
    DrawerItem
  }
}
</script>

<style scoped>
/*首页的右侧固定栏，查看购物车详情*/
#meg {
  position: fixed;
  right: 0px;
  top: 0;
  height: 100%;
  width: 35px;
  cursor: pointer;
}

#meg>.meg_nav {
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000000;
}

.meg_nav>.meg_shoppingbag {
  margin-top: 100px;
  width: 100%;
  height: 135px;
}

.meg_shoppingbag>img {
  width: 35px;
  height: 35px;
}

.meg_shoppingbag>p {
  margin: 5px auto;
  width: 16px;
  height: 48px;
  line-height: 16px;
  text-align: center;
  color: white;
}

.meg_shoppingbag>div {
  margin: 10px auto;
  width: 18px;
  height: 18px;
}

.meg_shoppingbag>div>span {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  background: #FF0018;
  color: white;
  text-align: center;
  font-size: 14px;
}

.meg_nav>.meg_top {
  display: block;
  position: absolute;
  bottom: 50px;
  width: 100%;
  height: 30px;
  cursor: pointer;
}

.meg_show>.toolbar_header {
  margin-bottom: 10px;
  width: 100%;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meg_show .toolbar_header .pro_Chk {
  padding-left: 10px;
  width: 60px;

  display: flex;
  align-items: center;
}

.pro_Chk #pro_ChkAll {
  width: 12px;
  height: 12px;
}

.pro_Chk label {
  margin-left: 5px;
  margin-bottom: 0;
  font-size: 12px;
  cursor: pointer;
}

.meg_show .toolbar_header a {
  width: 60px;
  font-size: 12px;
  color: gray;
  cursor: pointer;
}

.toolbar_footer {
  position: absolute;
  bottom: 0;
  padding: 0 16px;
  width: 480px;
  background: #eaeaea;
  z-index: 99999;
}

.toolbar_footer>.pro_total {
  width: 100%;
  height: 30px;
  background: #eceaea;
  color: #333;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pro_total>h3 {
  margin-bottom: 0;
  color: #000;
  font-weight: 400;
  font-size: 12px;
}

.pro_total>span>.total_price {
  font-weight: 600;
  color: #ff0036;
  font-size: 12px;
}

.pro_cashier {
  padding: 0 0 10px;
  width: 100%;
  text-align: center;
}

.pro_cashier button {
  width: 160px;
}

.meg_content {
  padding-bottom: 80px;
  width: 100%;
  overflow: auto;
}

.meg_noLogin {
  height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #666;
}
</style>
